import React, { useState } from 'react';
import ProTable from '@ant-design/pro-table';
import type { ProColumns } from '@ant-design/pro-table';
// 搜索 表头
import columnsData, { columnsDataType, usrColumns } from './data';
// 模拟的数据
import tableData from '../../mock/tableData';
import {
  getHistoryProcessInst,
  getHistoryActInst,
  getHistoryTaskInst,
} from '../../services/historyProcessInstance';
import { message, Modal, Table } from 'antd';

const ProcessDefinition = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modelTableData, setModelTableData] = useState([]);

  // 表头数据
  const columns: ProColumns<columnsDataType>[] = columnsData;

  // 操作行数据 自定义操作行
  const actionRender: any = (text: any, record: any, index: number) => (
    <ul className="ant-list-item-action" style={{ margin: 0 }}>
      {/* <li>
        <a
          onClick={async () => {
            let res = await getHistoryActInst({ processInstanceId: record.id });
            console.log(res);
          }}
        >
          活动信息
        </a>
        <em className="ant-list-item-action-split"></em>
      </li> */}
      <li>
        <a
          onClick={async () => {
            let res = await getHistoryTaskInst({
              processInstanceId: record.id,
            });
            console.log(res);
            if (res.code !== '000000') {
              return message.error('获取失败');
            }
            if (res.data.length == 0) {
              return message.info('无任务信息');
            }
            setModelTableData(res.data);
            setIsModalOpen(true);
          }}
        >
          流程预览
        </a>
      </li>
    </ul>
  );

  // 自定义数据的表格头部数据
  columns.forEach((item: any) => {
    item.dataIndex === 'action' ? (item.render = actionRender) : undefined;
  });

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <div>
      {/* Pro表格 */}
      <ProTable<columnsDataType>
        headerTitle="模型管理"
        bordered
        // 表头
        columns={columns}
        // 请求获取的数据
        request={async (params) => {
          let res = await getHistoryProcessInst({
            ...params,
            pageNum: params.current,
          });
          console.log(res);
          if (res.code !== '000000') {
            message.error('获取流程任务表格信息失败');
          }
          const result = {
            data: res.data,
            total: res.pagination?.total,
          };
          return result;
        }}
        // defaultData={tableData}
        rowKey="id"
        // 本地存储表格列的显示数据
        columnsState={{
          persistenceKey: 'pro-table-singe-demos',
          persistenceType: 'localStorage',
        }}
        // 搜索框配置
        search={{
          labelWidth: 'auto',
        }}
        // 搜索表单的配置
        form={{
          ignoreRules: false,
        }}
        pagination={{
          pageSize: 5,
        }}
        dateFormatter="string"
      />
      <Modal
        width={800}
        title="流程预览"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Table columns={usrColumns} dataSource={modelTableData} key="id" />
      </Modal>
    </div>
  );
};

export default ProcessDefinition;
